<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{layout}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .card {
            margin-bottom: 10px;
            width: 160px;
            height: 250px;
        }

        .card a {
            color: black;
        }

        a:hover {
            text-decoration: none;
        }

        .good-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div layout:fragment="content" class="d-flex flex-wrap justify-content-between goods" id="goods"
     style="min-height: 602px;">
    <div class="w-75 py-4">
        <div class="item py-4 d-flex w-100" style="border-bottom: 1px solid;height: 300px;"
             th:each="order : ${orderDetailsList}">
            <div class="card">
                <a href="/good/details?id=1" th:href="${'/good/details?id='+order.getGoodId()}">
                    <img src="/upload/img/good/g1.webp" alt="" class="card-img-top" th:src="${order.getImg()}">
                    <div class="card-body">
                        <h6 class="card-title good-title" th:text="${order.getTitle()}">YSL限量眼影银盘</h6>
                        <p class="card-text text-danger">￥ <span th:text="${order.getPrice()}">99</span></p>
                    </div>
                </a>
            </div>
            <form action="/order/ship" method="post" class="content ml-5 flex-grow-1">
                <input type="hidden" name="orderId" th:value="${order.getId()}">
                <h5>
                    收件人：<span th:text="${order.getTakeName()}">张先生</span>
                    <span class="text-danger" style="float: right;" th:text="${order.getIsSelf()==1?'买':'卖'}">买</span>
                </h5>
                <h5 class="mt-2">联系电话：<span th:text="${order.getTakePhone()}">12345678910</span></h5>
                <h5 class="mt-2 pb-3">收货地址：<span th:text="${order.getTakeAddress()}">湖南省常德市湖南文理学院</span></h5>
                <h6 class="mt-3 d-flex align-items-center">
                    发货快递：<span class="d-flex align-items-center" th:text="${order.getExpressName()}" style="height: 30px">顺丰</span>
                    <input type="text" class="w-25 form-control" name="expressName" style="height: 30px"
                           th:if="${order.getState()==2 && order.getIsSelf()==0}">
                </h6>
                <h6 class="mt-2 d-flex align-items-center">
                    快递单号：<span class="d-flex align-items-center" th:text="${order.getExpressNumber()}" style="height: 30px">2987834782342</span>
                    <input type="text" class="w-25 form-control" name="expressNumber" style="height: 30px"
                           th:if="${order.getState()==2 && order.getIsSelf()==0}">
                </h6>
                <div class="d-flex justify-content-between align-items-center mt-3 pt-4">
                    <h5 class="price text-danger" th:text="${'￥ '+order.getPrice()}">￥ 99</h5>
                    <div class="text-danger" th:switch="${order.getState()}">
                        <span th:case="1">待确认</span>
                        <span th:case="2">待发货</span>
                        <span th:case="3">待收货</span>
                        <span th:case="4">已完成</span>
                    </div>
                    <div th:if="${order.getState()!=4}">
                        <a href="" th:if="${order.getState()==1}" th:href="${'/order/pay?orderId='+order.getId()}"
                           class="btn btn-primary">确认订单，货到付款</a>
                        <button th:if="${order.getState()==2 && order.getIsSelf()==0}" class="btn btn-primary">确认发货
                        </button>
                        <a href="" th:if="${order.getState()==3 && order.getIsSelf()==1}"
                           th:href="${'/order/receipt?orderId='+order.getId()}" class="btn btn-primary">确认收货</a>
                        <a href="" th:if="${order.getState()!=4}" th:href="${'/order/cancel?orderId='+order.getId()}"
                           class="btn btn-danger">取消订单</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div th:replace="../templates/right"></div>
</div>
</body>
</html>